<template>
  <div class="out">
    <div class="login">
      <div class="login-form">
        <div class="login-form-con">
          <div class="for-tit">
            <div style="font-size: 42px; font-weight: bold">登录</div>
          </div>
          <div class="for-con">
            <el-form ref="ruleForm" :model="formLabelAlign" :rules="loginRules">
              <el-form-item prop="username">
                <el-input
                  v-model="formLabelAlign.username"
                  placeholder="用户名"
                  prefix-icon="el-icon-user"
                ></el-input>
              </el-form-item>
              <el-form-item prop="password">
                <el-input
                  v-model="formLabelAlign.password"
                  placeholder="密码"
                  prefix-icon="el-icon-lock"
                ></el-input>
              </el-form-item>
            </el-form>
            <div style="display: flex; justify-content: center">
              <el-button size="medium" round class="login-btn" @click="submitForm('ruleForm')"
                >登录</el-button
              >
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import {getTimeState} from "@/utils/util.js"
export default {
  data() {
    return {
      labelPosition: "right",
      formLabelAlign: {
        username: "",
        password: "",
      },
      loginRules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
        ],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
      },
    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
            // this.$layer.msg("提交成功！")
        //   alert("submit!");
        this.$router.push('/free/home');
        this.$message({
            message: getTimeState(),
            type: "success",
            duration: 3000
        })
        } else {
          return false;
        }
      });
    },
  },
};
</script>
<style src="./login.css" scoped>
</style>